<template>
  <div>
    <el-dialog :append-to-body="true" width="45%" @close="() => {$emit('closeRelationModal',false)}" :visible="relationVideoVisible" title="关联视频">
      <div>
        <el-button type="primary" @click="addVideo()" style="margin-top: -40px;margin-bottom:20px">添加视频</el-button>
        <el-table border :data="relationList">
          <el-table-column type="index" width="50" label="顺序" />
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="hot" label="热门顺序" width="80" />
          <el-table-column prop="sort" label="排序" width="60"/>
          <el-table-column prop="create_time" label="创建时间" />
          <el-table-column label="是否免费" width="80">
            <template slot-scope="scope">
              <div>{{scope.row.is_free ? '免费' : '收费'}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="()=>ev_videoFree(scope.row)">{{scope.row.is_free?'去收费':'去免费'}}</el-button>
              <el-button type="text" @click="()=>{delItem(scope.row)}">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 添加视频弹框中的视频列表 -->
      <el-dialog :append-to-body="true"  width="70%" :visible.sync="addVideoVisible" title="视频列表">
        <el-table row-key="id" :data="videoList" @selection-change="videoSelectionChange" style="width: 100%" border stripe>
           <el-table-column
            type="selection"
            width="55"
            >
          </el-table-column>
          <el-table-column type="index" label="顺序" />
          <!-- <el-table-column label="选中" width='50'>
            <template slot-scope="scope">
              <el-radio v-model="selectVideoId" :label="scope.row">{{''}}</el-radio>
            </template>
          </el-table-column> -->
          <el-table-column prop="out_video_id" label="视频id" />
          <el-table-column prop="cover_url" label="视频封面">
            <template slot-scope="scope">
              <div class="video_img">
                <img style="max-width:100px" :src="scope.row.cover_url" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="所属分类">
            <template slot-scope="scope">
              <div>
                {{ scope.row.categoryInfo.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="所属专栏">
            <template slot-scope="scope">
              <div>
                {{ scope.row.topicInfo.title }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="title" label="视频标题" />
          <el-table-column width='180' prop="desc" label="视频描述" />
          <el-table-column prop="create_time" label="上传时间" />
          <el-table-column prop="status" label="视频状态">
            <template slot-scope="scope">
              <div>{{ videoStatus[scope.row.status] }}</div>
            </template>
          </el-table-column>
        </el-table>  
        <el-pagination
          :current-page="query.page"
          :page-size="query.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="videoTotal"
          @current-change="handleCurrentChange"
        />

        <div slot="footer" class="dialog-footer">
          <el-button @click="addVideoVisible = false">取 消</el-button>
          <el-button type="primary" @click="ev_videoRelation()">确定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    
  </div>
</template>
<script>
import {
  videoRelieve,
  videoFree,
  deleteTopic,
  videoRelation,
  videoList
} from "@/api/topic/index";
import { getVideoList } from "@/api/aliyun/video";
export default {
  props: {
    relationVideoData: {
      type: Object
    },
    relationVideoVisible: Boolean
  },
  data() {
    return {
      videoStatus: {
        0: "待编辑",
        1: "正在编辑",
        2: "审核中",
        3: "审核完成"
      },
      relationList:[],
      videoList: [],
      addVideoVisible: false,
      query: {
        page: 1,
        pageSize: 10
      },
      videoTotal: 0,
      selectVideoIds: [],
    };
  },
  methods: {
    async videoSelectionChange(val){
      this.selectVideoIds=val;
    },
    async getRelatedVideoList(){
      const {data:res} = await videoList(this.relationVideoData.id);
      this.relationList = res.list;
    },
    handleCurrentChange(page) {
      this.query.page = page;
      this.getVideoListData()
    },
    async ev_relatedVideo(item){
      const {data:res} = await videoList(item.id);
      this.relationVideoData.list = res.list;
      this.relationVideoData.id=item.id;
      this.relationVideoVisible=true;
    },
    //获取添加视频modal中的视频列表
    async getVideoListData() {
      const { data: res } = await getVideoList(this.query);
      this.videoList = res.list;
      this.videoTotal = res.total;
    },

    async addVideo() {
      this.addVideoVisible = true;
      this.getVideoListData();
      this.query = {
        page: 1,
        pageSize: 10
      };
    },
    // 设置免费视频
    async ev_videoFree(item) {
      await videoFree(
        { video_id: item.id, is_free: item.is_free ? 0:1 },
        this.relationVideoData.id
      );
      this.getRelatedVideoList();
    },
    handleSelectionChange(val) {},
    //删除单个关联视频
    delItem(item) {
      this.$confirm("是否确认删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(
        async () => {
          const res = await videoRelieve(
            { video_id: item.id },
            this.relationVideoData.id
          );
          if (res.code === 1) {
            this.$emit("getDataList");
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.getRelatedVideoList()
          // this.visible = false;
        },
        () => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        }
      );
    },
    //新增关联视频
    async ev_videoRelation() {
      await videoRelation(
        { video_id: this.selectVideoIds.map(item => item.id).join(',') },
        this.relationVideoData.id
      );
      this.addVideoVisible = false;
      this.getRelatedVideoList()
    }
  },
  watch: {
    relationVideoVisible(newVal) {
      if(newVal){
        this.getRelatedVideoList()
      }
    }
  }
};
</script>
